<template>
  <div v-show="blogList.length>0">
    <div>
      <div style="display: flex;justify-content:center;border-bottom: 2px solid #f1f6eb;">
        <section data-v-3774cb87=""></section>
        <section data-v-3774cb87="">推荐阅读</section>
        <section data-v-3774cb87=""></section>
        <section data-v-3774cb87=""></section>
      </div>
    </div>
    <a-list itemLayout="vertical" size="large" :dataSource="blogList" class="blog-item">
      <!--flipInX lightSpeedIn-->
      <a-list-item slot="renderItem" slot-scope="item, index" class="animated fadeInDown" style="padding: 20px 20px;" @click="blogItemClick(item.id)">
        <template slot="actions">
          <span key="eye">
          <a-icon type="eye" style="margin-right: 8px"/>
          {{item.viewCount}}
        </span>
          <span key="like-o">
          <a-icon type="like-o" style="margin-right: 8px"/>
          {{item.starCount}}
        </span>
          <span key="message">
          <a-icon type="message" style="margin-right: 8px;"/>
          {{item.commentCount}}
        </span>

        </template>
        <!--博文封面图片-->
        <!--:class="activeItemClass(item.id)"-->
        <div class="overimg" slot="extra">
          <img
            width="200"
            alt="logo"
            style="margin-top: 26px;"
            :src="item.coverUrl"
          />
          <i class="light"></i>
        </div>
        <img v-if="item.top==='1'" src="/images/icon/top.png" style="position: absolute;right: 0px;top:0px;"/>
        <a-list-item-meta>
          <!--标题-->
          <div slot="title" :href="`/blog/detail/`+item.id" target="_blank">
            <span class="super-link">{{item.title}}</span>
          </div>
        </a-list-item-meta>
        <div style="font-weight: bold">
          {{item.introduction.length>90?item.introduction.substring(0,90):item.introduction}}
        </div>
      </a-list-item>
    </a-list>
  </div>

</template>
<script>
  import { blogRecommondQuery } from '@/api/blog'
  import { mapGetters } from 'vuex'
  import _ from 'lodash'

  export default {
    data() {
      return {
        recommendBlogList: [],// 推荐的博客列表
        name: 'BlogRecommend'
      }
    },
    computed: {
      ...mapGetters(['blogPageData']),
      blogList() {
        let calcNum = 8 - this.blogPageData.total - 2
        return _.cloneDeep(this.recommendBlogList).splice(0, calcNum)
      }
    },

    created() {
      blogRecommondQuery(1, 6).then((res) => {
        if (res.code === '200') {
          this.recommendBlogList = res.data.records
        } else {
          this.$message.warning(res.msg)
        }
      }).catch((err) => {
        this.$message.error('推荐博客加载失败.', err)
      })
    },
    methods:{
      /**
       * 博客列表项点击
       */
      blogItemClick(id) {
        this.$router.push(`/blog/detail/${id}`)
        //let blogId = this.$route.params.blogId
      },
    }
  }
</script>
<style scoped>
  section{
    display: block;
  }
  section:first-child {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-image: linear-gradient(to top, #3de0ad, #d0f2e9);
    animation: ball-1 2.3s ease-in-out infinite alternate;
    -webkit-animation: ball-1 2.3s ease-in-out infinite alternate;
  }

  section:nth-child(2) {
    padding: 0 10px;
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 1.5px;
    color: rgba(0, 0, 0, 0.85);
    cursor: pointer;
    transition: 0.25s;
  }

  section:nth-child(2):hover {
    color: #9a69ec;
  }

  section:nth-child(3) {
    width: 24px;
    height: 24px;
    border-radius: 100%;
    background-image: linear-gradient(to left, #3ed4e9, #89edf6);
    animation: ball-2 2.7s ease-in-out infinite alternate;
    -webkit-animation: ball-1 2.3s ease-in-out infinite alternate;

  }

  section:last-child {
    margin-top: 10px;
    margin-left: -8px;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    background: rgba(91, 168, 238, 0.6);
    animation: ball-3 2.5s ease-in-out infinite alternate;
    -webkit-animation: ball-1 2.3s ease-in-out infinite alternate;

  }

  @keyframes ball-1 {
    from {
      transform: translate(0, 0);
    }
    50% {
      transform: translate(0, -3px);
    }
    to {
      transform: translate(0, 6px);
    }
  }
  @keyframes ball-2 {
    from {
      transform: translate(0, 0);
    }
    50% {
      transform: translate(0, -1px);
    }
    to {
      transform: translate(0, 4px);
    }
  }
  @keyframes ball-3 {
    from {
      transform: translate(0, 0);
    }
    50% {
      transform: translate(0, -6px);
    }
    to {
      transform: translate(0, 3px);
    }
  }


  .overimg{
    position: relative;
    display: block;
    overflow: hidden;
    box-shadow: 0 0 10px #FFF;
  }
  .light{
    cursor:pointer;
    position: absolute;
    left: -200px;
    top: 0;
    width: 200px;
    height: 180px;
    background-image:-moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
    background-image:-webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
    transform: skew(-25deg);
    -o-transform: skew(-25deg);
    -moz-transform: skew(-25deg);
    -webkit-transform: skew(-25deg);
  }
  .overimg:hover .light{
    left:0px;
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    transition:0.5s;
  }

  .super-link {
    position: relative;
    text-decoration: none;
    color: #000;
  }

  /*伪元素是两个冒号*/
  .super-link::after {
    content: '';

    width: 100%;
    height: 2px; /*设置伪元素的高度，这里是下划线的粗细*/
    position: absolute;
    top: 100%;
    left: 0;

    background-color: currentColor; /*当前标签继承的文字颜色，这里让伪元素的背景色与父元素的文字颜色相同*/
    transform: scale(0);
    transition: all .35s;
  }

  .super-link:hover::after {
    transform: scale(1);
  }
</style>
